@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .blue-button-w-gradient-border {
    --blue500: theme(colors.blue.500);
    --blue700: theme(colors.blue.700);
    --blue800: theme(colors.blue.800);
    background: linear-gradient(to bottom right, var(--blue500), var(--blue700))
        padding-box,
      linear-gradient(to bottom, var(--blue500), var(--blue800)) border-box;
    border: 1px solid transparent;
  }
  .light-button-w-gradient-border {
    --gray50: theme(colors.gray.50);
    background: linear-gradient(to bottom, var(--gray50), var(--gray50))
        padding-box,
      linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.27))
        border-box;
    border: 1px solid transparent;
  }
  .dark-button-w-gradient-border {
    --gray50: theme(backgroundColor.custom-dark-gray);
    background: linear-gradient(to bottom, var(--gray50), var(--gray50))
        padding-box,
      linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.2),
          rgba(255, 255, 255, 0.1)
        )
        border-box;
    border: 1px solid transparent;
  }
  .container-w-gradient-border {
    background: linear-gradient(to bottom, white, white) padding-box,
      linear-gradient(to bottom, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.19))
        border-box;
    border: 1px solid transparent;
  }
  .dark-container-w-gradient-border {
    --background: theme(backgroundColor.custom-gray);
    background: linear-gradient(to bottom, var(--background), var(--background))
        padding-box,
      linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1))
        border-box;
    border: 1px solid transparent;
  }
}
